<script lang="ts">
import { defineComponent } from "vue";
import { useThis } from "@/hooks/global";
import { upload_up } from "@/api/upload";
import { chooseMedia } from "@/utils/meida";
import { Toast } from "@/utils/toast";

export default defineComponent({
  props: {
    modelValue: { type: Boolean, required: true }, // 是否聚焦
    placeholder: String,
    className: String,
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    let instance: UniApp.EditorContext | undefined = undefined;

    const _that = useThis();

    const editorReady = () => {
      uni
        .createSelectorQuery()
        .in(_that)
        .select("#editor")
        .context((resp: any) => (instance = resp.context))
        .exec();
    };
    const editorFocus = () => {
      ctx.emit("update:modelValue", true);
    };
    const editorBlur = () => {
      ctx.emit("update:modelValue", false);
    };

    const getContents = (success: (e: { html: string }) => void) => {
      instance?.getContents({ success });
    };

    const imgClick = () => {
      chooseMedia({ count: 1, mediaType: ["image"] }, (resp) => {
        Toast.showLoading();
        upload_up(resp[0].tempFilePath, { type: "0" }).then((resp) => {
          instance?.insertImage({
            src: resp[0].url,
            width: "100%",
            success: () => {
              instance?.scrollIntoView({});
            },
          });
          Toast.hideLoading();
        });
      });
    };

    return { editorReady, editorFocus, editorBlur, getContents, imgClick };
  },
});
</script>

<template>
  <view class="form-editor">
    <editor
      id="editor"
      :class="className"
      :placeholder="placeholder"
      @ready="editorReady"
      @focus="editorFocus"
      @blur="editorBlur"
    />

    <view
      class="form-editor-bar"
      :style="{ transform: modelValue ? '' : 'translateY(100%)' }"
    >
      <view class="form-editor-img" @click="imgClick">
        <image class="form-editor-img2" src="/static/form-editor-img.png" />
        插入图片
      </view>

      <view class="form-editor-btn">完成</view>
    </view>
  </view>
</template>

<style lang="scss">
.form-editor {
  .ql-container {
    .ql-blank::before {
      font-style: normal;
    }
  }

  .form-editor-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100rpx;
    padding-left: 40rpx;
    padding-right: 30rpx;
    background-color: #ffffff;
    transition: all 0.3s ease-out;
  }

  .form-editor-img {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }

  .form-editor-img2 {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
  }

  .form-editor-btn {
    padding: 0 32rpx;
    margin-left: auto;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 64rpx;
    font-weight: bold;
    border-radius: 32rpx;
    background-color: #ff7900;
  }
}
</style>